import { Flex, Tabs } from 'antd';
import type React from 'react';
import { type RefObject, useMemo, useRef } from 'react';
import MapView, {
  type MapChangeEventArgs,
  Mapless,
} from '@/components/MapView';
import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM } from '@/config/constants';
import MapboxMarker, {
  type MapboxMarkerRef,
} from '../components/MapboxMarker/Index';
import StationMana from '../components/StationMana/StationMana';
import type { Station } from '../Mapless/index.d';
import styles from './index.module.less';
import * as tests from './TestControl';
import * as mana from './TestControl/mana';
import * as mana3d from './TestControl/mana-3d';
import * as other from './TestControl/other';
import * as tool from './TestControl/tool';

export const Demo: React.FC = () => {
  const markerRef = useRef<MapboxMarkerRef>(undefined);
  const maplessRef = useRef<Mapless>(undefined);

  // 示例站点数据
  const demoStations: Station[] = [
    {
      id: 'station1',
      longitude: 113.28539,
      latitude: 23.14627,
      name: 'Demo Station 1',
    },
    {
      id: 'station2',
      longitude: 113.29039,
      latitude: 23.14927,
      name: 'Demo Station 2',
    },
  ];

  function handleChange(e: MapChangeEventArgs): void {
    switch (e.type) {
      case 'ready':
        {
          maplessRef.current = e.target;
          markerRef.current?.show();
        }
        break;
      case 'zoom':
        break;
      default:
        break;
    }
  }

  // 为每个子目录创建测试组件
  const testTabs = useMemo(() => {
    const all: Record<
      string,
      Record<string, React.FC<{ maplessRef: RefObject<Mapless | undefined> }>>
    > = { mana, mana3d, tool, other };
    return Object.keys(all).map((dir) => {
      const one = all[dir];
      const components = Object.keys(one).map((t) => {
        const TestComponent = one[t as keyof typeof one];
        return <TestComponent key={t} maplessRef={maplessRef} />;
      });
      return {
        label: dir,
        key: dir,
        children: <div className={styles.one}>{components}</div>,
      };
    });
  }, []);

  return (
    <div className={styles.demo}>
      <MapView
        accessToken={Mapless.accessToken}
        style="streets"
        center={DEFAULT_MAP_CENTER}
        zoom={DEFAULT_MAP_ZOOM}
        className={styles.map}
        onChange={handleChange}
      />
      {/** biome-ignore lint/correctness/useUniqueElementIds: off*/}
      <StationMana id="demo-stations" stations={demoStations} />
      <div className={styles.ctrls}>
        <Tabs items={testTabs} />
      </div>
      <MapboxMarker
        ref={markerRef}
        maplessRef={maplessRef}
        offsetY={0}
        offsetX={400}
        lngLat={DEFAULT_MAP_CENTER}
        className={styles.mkr}
      >
        <Flex vertical gap={8}>
          <tests.TestXD maplessRef={maplessRef} />
          <tests.TestMarker maplessRef={maplessRef} />
        </Flex>
      </MapboxMarker>
    </div>
  );
};
